<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<% String mes=request.getParameter("mes");%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | Log in</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<%=path%>/static/alpha/dist/css/adminlte.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="<%=path%>/static/alpha/plugins/iCheck/square/blue.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page">
<div class="login-box">

    <!-- /.login-logo -->
    <div class="card">
        <div class="card-body login-card-body">
            <p class="login-box-msg">请输入你的邮箱</p>

            <form action="<%=path%>/manage/user/checkEmailCode" method="post" id="email-sendCode">
                <div class="form-group has-feedback">
                    <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                    <span class="fa fa-envelope form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password"  id="emailCode"  name="emailCode" class="form-control" placeholder="EmailCode">
                    <span class="fa fa-lock form-control-feedback"></span>
                </div>
                <div class="row">

                    <!-- /.col -->
                    <div class="col-5">
                        <button type="button" id="sendCheckCode"  class="btn btn-primary btn-block btn-flat">发送验证码</button>
                    </div>
                    <!-- /.col -->
                </div>
                <%
                    if("1".equals(mes))
                    {
                %>
                <font color="red">验证码错误</font>
                <%
                    }
                %>

                <div class="social-auth-links text-center mb-3">

                    <button type="submit" id="next" class="btn btn-block btn-primary">下一步</button>


                </div>
            </form>


            <!-- /.social-auth-links -->


        </div>
        <!-- /.login-card-body -->
    </div>
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="<%=path%>/static/alpha/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<%=path%>/static/alpha/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- iCheck -->
<script src="<%=path%>/static/alpha/plugins/iCheck/icheck.min.js"></script>
<script src="<%=path%>/static/X-admin-2.3/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass   : 'iradio_square-blue',
            increaseArea : '20%' // optional
        })
    })

</script>
<script type="text/javascript">
    var st;
    var f = false;
    $(document).ready(function () {
        $("#email").blur(checkEmailName);
        $("#emailCode").blur(checkEmailCode);
        $("#email-sendCode").submit(check);
        $("#sendCheckCode").click(function(){
            if(f==true)
                {
                    $(this).prop("disabled",true);
                    num = 60;
                    st = setInterval(count,1000);
                    var email=$("#email").val();


                    $.post("<%=path%>/manage/user/sendEmailCode",
                        {email:email},
                        function () {

                        });


                }

        });
    });


    var num = 60;
    function count()
    {
        $("#sendCheckCode").text(num+"s");
        num--;
        if(num==0)
        {
            clearInterval(st);
            $("#sendCheckCode").prop("disabled",false);
            $("#sendCheckCode").text("发送验证码");
        }
    }

    function check()
    {
        var flagEmailName=checkEmailName();
        var flagEmailCode=checkEmailCode();
        return flagEmailName&&flagEmailCode;
    }
    function checkEmailName()
    {
            var vemail=/^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
            var emailName=$("#email").val();
            var flagEmail=vemail.test(emailName);
            if (emailName=="")
            {
                $("#email").next().css("color","red");
                $("#email").next().html("邮箱不能为空");
                return false;
            }
            else
            {
                if (flagEmail==true)
                {
                    var flag;
                    $.ajax({
                        url:"<%=path%>/manage/user/checkEmailName",
                        type:"post",
                        data:{emailName:emailName},
                        async:false,
                        success:function (mes)
                        {
                                if (mes=="1")
                                {
                                    $("#email").next().css("color","green");
                                    $("#email").next().html("邮箱名存在");
                                    f = true;
                                    flag=true;
                                }
                                if (mes=="0")
                                {
                                    $("#email").next().css("color","red");
                                    $("#email").next().html("邮箱名不存在");
                                    flag=false;
                                }
                        }
                    });
                    return flag;
                }
                else
                {
                    $("#email").next().css("color","red");
                    $("#email").next().html("邮箱名含有非法字符");
                    return false;
                }
            }


    }
    function checkEmailCode()
    {
        var code=$("#emailCode").val();
        if(code=="")
        {
            $("#emailCode").next().css("color","red");
            $("#emailCode").next().html("验证码为空");
        }
        else
        {
            $("#emailCode").next().css("color","green");
            $("#emailCode").next().html("√");
        }
    }


</script>
</body>
</html>
